<template>
	<view>
		<view class="" style="width: 100vw;height: 100vh">
			<view  style="min-height: 100vh">
				<hx-navbar title="收益详情" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
					transparent="auto"></hx-navbar>
				<view class="container">
					<view class="collect_img_box">
						<view class="" style="z-index: -10">
							<!-- info.image.substring(info.image.length-3) -->
							<view class="animal-box" v-if="ifformat!=='gif'">
								<view class="ani-list">
									<uni-view class="ani-info2 r1">
										<image class="an-image2" :src="shangpiimage" alt="Your Image">
											<!-- 	<img class="an-image2" :src="shangpiimage" alt="Your Image"> -->
									</uni-view>

									<uni-view class="ani-info2 r1-bg"></uni-view>
									<uni-view class="ani-info r2"></uni-view>

									<uni-view class="ani-info2 r3-bg">
										<image class="an-image2" src="@/static/aipicture/zfsl_back.png"
											alt="Your Image">
									</uni-view>
									<uni-view class="ani-info r4"></uni-view>
									<uni-view class="ani-info r5"></uni-view>
									<uni-view class="ani-info r6"></uni-view>

								</view>

							</view>
							<!-- 	<view class="animal-box" v-if="ifformat==='gif'">
                        			<image :src="info.image" mode="aspectFill" class="collect_image">
                        			</image>
                        			
                        		</view> -->
						</view>
						<image src="/static/index/taizi.png" mode="widthFix" class="taizi_img"></image>
					</view>
					<view class="selshop">
						查看商品入口
					</view>
					<view class="mess_class">
						
						<view class="me">
							持仓数量:{{shuliang}}
						</view>
						<view class="me">
							持仓价值：{{jiazhi}}
						</view>
					</view>
					<!-- 图表 -->
					<view class="charts_body">
						<view class="charts-box" style="color: white;">
							<view class="charts_size sizelinear-gradient" style="">
								2024收益详情
							</view>
							<view class="charts_nian sizelinear-gradient" style=" ">
								2024 Annual Earnings
							</view>
							<!-- 	<view class="" style="font-size: 27rpx;margin-top: 20rpx;">
								收益金额
							</view> -->
						<view class="" style="position: relative;">
								<qiun-data-charts type="column" :opts="opts" :chartData="chartData"
									style="background-color: #000000;fontColor: #fff;" />
						<image src="/static/user/jiantou.png" style="position: absolute;top: -30rpx;width: 500rpx;left:100rpx;"
							mode="widthFix"></image>
							</view>
						</view>
						<view class="charts-box" style="color: white;">
							<view class="charts_size sizelinear-gradient">
								2025收益详情
							</view>
							<view class="charts_nian sizelinear-gradient" style="font-size: 30rpx">
								2025 Annual Earnings
							</view>
							<!-- 			<view class="" style="font-size: 27rpx;margin-top: 20rpx;">
								收益金额
							</view> -->
						<view class="" style="position: relative;">
								<qiun-data-charts type="column" :opts="opts" :chartData="chartData"
									style="background-color: #000000;fontColor: #fff;" />
						<image src="/static/user/jiantou.png" style="position: absolute;top: -30rpx;width: 500rpx;left:100rpx;"
							mode="widthFix"></image>
							</view>
						</view>
						<view class="charts-box" style="color: white;">
							<view class="charts_size sizelinear-gradient" style="">
								2026收益详情
							</view>
							<view class="charts_nian sizelinear-gradient" style="">
								2026 Annual Earnings
							</view>
							<!-- 		<view class="" style="font-size: 27rpx;margin-top: 20rpx;">
								收益金额
							</view> -->
							<view class="" style="position: relative;">
								<qiun-data-charts type="column" :opts="opts" :chartData="chartData"
									style="background-color: #000000;fontColor: #fff;" />
						<image src="/static/user/jiantou.png" style="position: absolute;top: -30rpx;width: 500rpx;left:100rpx;"
							mode="widthFix"></image>
							</view>

						
							<!-- 信息 -->
							<view class="mess_charts">
								<view class="fenhong">
									当前收益金额：
									<view class="sekuai">

									</view>
								</view>
								<view class="fenhong">
									商品收益金额：
									<view class="sekuai2">

									</view>
								</view>
							</view>
							<view class="charts_size_zhu">
								*注：当前收益金额之前的区域均已结算完毕
							</view>
						</view>



					</view>

					<view class="" style="height: 50rpx;">

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				shangpiimage: "",
				selStyle: {
					'--selectColorSize': this.$store.state.selectColorSize, //字体颜色
					'--backgroundColor': this.$store.state.kbackgroundColor,
				},
				ifformat: 'png',
				shuliang: '', //数量
				jiazhi: "", //价值
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#faaa64", "#aa55ff", "#EE6666", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452",
						"#9A60B4",
						"#ea7ccc"
					],
					fontColor: "#ffffff",
					padding: [15, 15, 20, 5],
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						fontColor: "#fff",
						disableGrid: true,
						dashLength: 4,
						// title: "王五",
						// titleFontSize: 13,
					},
					yAxis: {
						showTitle: true,
						splitNumber: 3,
						dashLength: 10,
						gridType: "dash",
						data: [{
							min: 0,

							type: "value",
							titleFontSize: 14,
							titleOffsetY: -5,
							titleOffsetX: -15,
							title: "收益金额"
						}]
					},
					legend: {
						show: false,
						bottom: 0,
						textStyle: {
							color: 'rgba(60, 255, 151, 0.6)'
						}
					},
					extra: {
						column: {
							colorStop: 0.1,

							fontColor: "#ffffff",
							type: "group",
							width: 33,
							linearType: "custom",
							activeBgColor: "#aa00ff",

							seriesGap: 6,
							activeBgOpacity: 0.18,
							// linearOpacity: 0.9,
							customColor: [
								"#ff1717", "#1d20ff"
							],
							barBorderRadius: [
								6,
								6,
								0,
								0
							]



						},
						tooltip: {
							showBox: false,
						}
					}
				}
			};
		},
		onLoad(val) {
			// this.$common.errorToShow('此界面数据暂为模拟开发数据')
			//	this.ifformat = res.data.image.substring(res.data.image.length - 3) //获取照片格式
			console.log("val----", val.image)
			this.shangpiimage = val.image
			this.shuliang = val.shuliang
			this.jiazhi = val.jiazhi

		},
		methods: {

		},
		onPullDownRefresh() {
		 
			setTimeout(function() {
		uni.stopPullDownRefresh();
			}, 1000);
				 // this.$common.errorToShow('此界面数据暂为模拟开发数据')
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {

						axisLabel: {
							color: '#aaaaff'
						},
						fontColor: "#eff5ff",
						categories: ["3.30(Mar)", "6.30(Jun)", "9.30(Sep)", "12.30(Dec)"],
						linearType: "custom",
						series: [

							{
								name: "",
								data: [{
									color: "#fafcdb", //["#ff5a70","#1d20ff"],
									//color:"#ff5a70",// "#ff200c",
									linearType: "custom",
									value: 45.9,
								}, {
									color: "#f8ffd7",
									value: 91.8
								}, {
									activeBgOpacity: 1,
									color: "#2100e1", //ffff01#8900c3 "#1100ff", // "#b53eff",
									value: 137.7
								}, {
									color: "#ffffc4", // "#ffffc4",
									value: 183.6
								}]
							},
							// 	{
							// 	fontColor: "#eff5ff",
							// 	name: "目标值",
							// 	linearType: "custom",

							// 	data: [45.9, , 137.7, 183.6],

							// },
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}

	}
</script>

<style scoped lang="scss">
	// 3d

	.container {}

	.3D {
		/* 让图片填充整个容器 */
		transform-style: preserve-3d;
		/* 保留3D效果 */
		transition: transform 20s;
		/* 设置旋转动画的时间 */
	}

	.image-container {
		perspective: 1000px;
		/* 这定义了观察者与z=0平面的距离，模拟3D效果 */
		width: 300px;
		border: 11px solid yellow;
		/* 定义图片的宽度 */
		height: 300px;
		/* 定义图片的高度 */
		margin: auto;
		/* 使图片在页面中居中 */

	}

	.rotate-image {
		width: 500rpx;
		/* 让图片填充整个容器 */
		height: 500rpx;

		margin: auto;
		text-align: center;
		// border:10rpx solid  #e2e2e2

	}

	.rotate-image:hover {
		transform: rotateY(360deg);
		/* 设置旋转角度 */
	}

	.rotate-image {
		/* ...其他样式... */
		animation: rotate 15s infinite linear;
		/* 设置一个无限循环的旋转动画 */
	}

	@keyframes rotate {
		from {
			transform: rotateY(0deg);
		}

		to {
			transform: rotateY(360deg);
		}
	}

	// 3D
	.animal-box {
		-webkit-perspective: 800;
		-webkit-transform-style: preserve-3d;
		perspective: 800;
		transform-style: preserve-3d;
		position: relative;
		width: 503rpx;
		height: 503rpx;
		margin: 13rpx auto;


	}

	.ani-list {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		-webkit-transform: rotateY(-50deg);
		-webkit-transform-style: preserve-3d;
		transform: rotateY(271deg); //rotateY(-50deg);
		transform-style: preserve-3d;
		-webkit-transform-origin: center;
		transform-origin: center;
		width: 500rpx;
		height: 500rpx;
		margin: 0 auto;
		animation: rotate 15s infinite linear;
		border-radius: 43rpx;

	}



	.animal-box .ani-list .r1,
	.animal-box .ani-list .r3 {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background-color: #dddedf;
		border: 5rpx solid #ff3936;
	}

	.animal-box .ani-list .r1-bg {
		top: 0px;
		width: 500rpx;
		height: 500rpx;
		-webkit-transform: translateZ(27rpx); //14px
		transform: translateZ(27rpx);
		background-color: #dddedf;
	}

	.animal-box .ani-list .r2 {
		top: 21rpx;
		// transform: rotateY(90deg) translateZ(248px) translateX(-13px); 
		//14px
		transform: rotateY(90deg) translateZ(492rpx) translateX(-26rpx); //-26rpx
		transform-origin: left;
		// transform: rotateY(90deg) translateZ(245px) translateX(0px);

		width: 50rpx;
		// height: 220px8
		height: 450rpx;

	}

	.animal-box .ani-list .r4 {
		// top: 20px;
		top: 20rpx;
		//28px
		-webkit-transform: rotateY(-90deg) translateZ(20rpx) translateX(0rpx);
		//10px
		transform: rotateY(-90deg) translateZ(20rpx) translateX(0rpx);
		width: 52rpx;

		// height: 230px;

		height: 450rpx;
	}

	.animal-box .ani-list .r1,
	.animal-box .ani-list .r3 {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background-color: #dddedf;
		// border: 5rpx solid #ff3936;
		border: 5rpx solid #673DE7;
	}

	.animal-box .ani-list .r3-bg {
		top: 0px;
		width: 500rpx;
		height: 500rpx;

		-webkit-transform: rotateY(180deg) translateZ(27rpx); //14px
		transform: rotateY(180deg) translateZ(27rpx);
		background-color: #dddedf;
		border: 5rpx solid #673DE7; //red
	}

	.ani-info2 {
		list-style-type: none;
		position: absolute;
		//top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		text-align: center;
		// width: 249px;
		//height: 249px;
		// background: url('@/logo.png') no-repeat;
		// background-size: 100% 100%;
		background: #e8e8e8;
		-webkit-transition: -webkit-transform 2s, opacity 2s;
		-webkit-backface-visibility: visible;
		transition: opacity 2s, -webkit-transform 2s;
		transition: transform 2s, opacity 2s;
		transition: transform 2s, opacity 2s, -webkit-transform 2s;
		backface-visibility: visible;
		border-radius: 56rpx;
	}

	.animal-box .ani-list .ani-info {
		list-style-type: none;
		position: absolute;
		//top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		text-align: center;
		// width: 249px;
		//height: 249px;
		// background: url('@/logo.png') no-repeat;
		// background-size: 100% 100%;
		background: #e8e8e8;
		-webkit-transition: -webkit-transform 2s, opacity 2s;
		-webkit-backface-visibility: visible;
		transition: opacity 2s, -webkit-transform 2s;
		transition: transform 2s, opacity 2s;
		transition: transform 2s, opacity 2s, -webkit-transform 2s;
		backface-visibility: visible;
		border-radius: 16rpx;
	}

	.animal-box .ani-list .r5 {
		left: 20rpx;
		top: 16rpx;

		-webkit-transform: rotateX(90deg) translateZ(22rpx); //11px
		transform: rotateX(90deg) translateZ(22rpx);
		// height: 26px;
		// width: 218px;
		height: 50rpx;

		width: 440rpx;
	}

	.animal-box .ani-list .r6 {
		left: 20rpx;
		top: -25rpx;
		//	-webkit-transform: rotateX(-90deg) translateZ(236px);
		transform: rotateX(-90deg) translateZ(472rpx);
		// height: 26px;
		// width: 218px;
		height: 50rpx;

		width: 440rpx;
	}

	// 	.animal-box .ani-list .r1 .an-image, .animal-box .ani-list .r3 
	.an-image {
		width: 100%;
		height: 100%;
		margin: 0rpx auto;
		background: #ffffff;
		padding: 30rpx;
		// border:5rpx solid red;
		box-sizing: border-box;
		border-radius: 52rpx;

		.image {

			border-radius: 50rpx;
		}
	}

	.an-image2 {
		width: 100%;
		height: 100%;
		margin: 0rpx auto;
		background: #ffffff;
		// border:5rpx solid red;
		box-sizing: border-box;
		border-radius: 52rpx;

		.image {}
	}

	.animal-box .ani-list .r1 {
		-webkit-transform: translateZ(30rpx); //15px
		transform: translateZ(30rpx);
	}

	.taizi_img {
		width: 560rpx;
		width: 590rpx;
		display: block;
		// margin-top: 10rpx;
		//margin: 22rpx auto ;
		margin: 85rpx auto 0;
	}

	.collect_img_box {
		width: 100%;
		// height: 850rpx;
		z-index: 1;
		padding: 88rpx 0 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		opacity: 1;

		.imgCont {
			width: 511rpx;
			height: 511rpx;
			background-color: #fff;
			border-radius: 30rpx;
			padding: 10rpx;
		}

		.collect_image {
			width: 100%;
			height: 100%;
			display: block;
			border-radius: 30rpx;
		}

		.taizi_img {
			width: 560rpx;
			width: 590rpx;
			display: block;
			// margin-top: 10rpx;
			//margin: 22rpx auto ;
			margin: 85rpx auto 0;
		}
	}

	//信息图表
	.mess_class {
		width: 690rpx;
		margin: 30rpx auto 0;

		background: linear-gradient(234deg, #E8B9FD 0%, #FBA5B4 100%);
		border-radius: 20rpx 20rpx 0 0;
		padding: 26rpx 20rpx 28rpx;
		display: flex;
		
		align-items: stretch;
		font-weight: 600;
		font-size: 28rpx;
		.me{
			padding-right: 30rpx;
		}
	}

	.charts_body {
		height: auto;
		background: #000;
		width: 690rpx;

		margin: auto;
		// padding: 30rpx;

		z-index: 0;
	}

	.charts-box {


		.charts_size {
			font-size: 36rpx;
			width: 690rpx;
			margin: auto;
			text-align: center;
			padding: 20rpx 0 20rpx;
			
		}
		.sizelinear-gradient{
			 color: #ffffff;
			  background-color: #007aff;
			  background-image: linear-gradient(180deg, #ff2121 0%, #ffffff 70%, #ffffff 100%);
			  background-clip: text;
			  -webkit-background-clip: text;
			  color: transparent;
			  font-weight: 500;
		}

		.charts_nian {
			font-size: 30rpx;
			padding: 10rpx 30rpx;
		}

		.mess_charts {


			.fenhong {
				display: flex;

				.sekuai {
					width: 89rpx;
					height: 28rpx;
					background: linear-gradient(268deg, #f80000 0%, #2100e1 100%);
				}

				.sekuai2 {
					width: 89rpx;
					height: 28rpx;
					background: linear-gradient(268deg, #ff0004 0%, #ffe4d4 100%);
				}

			}
		}

		.charts_size_zhu {
			text-align: right;
			height: 70rpx;
			margin-top: 50rpx                                       ;

			font-size: 18rpx;

		}
	}
	.selshop{
		margin: 20rpx auto;
		text-align: center;
	}
</style>